/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 77px;
    padding-bottom: 20px;
}

h3 {
    font-size: 18px;
    font-weight: bold;
}


h4 {
    font-weight: bold;
    font-size: 17px;
    color: #091F4E;
}

h5 {
    font-size: 14px;
    font-weight: bold;
}

h6 {
    font-size: 14px;
    font-weight: bold;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/*Set widths on the form inputs since otherwise they're 100% wide */
input,
select {
    max-width: 280px;
}

.maxWidthTH {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
        margin-top: 10px;
    }
}

ul.nav.navtabs li:not(.active) a {
    background-color: #eeeeee;
    color: grey;
    list-style: none;
}

ul.nav.nav-tabs li.active a {
    border-top: 3px solid #16a765;
    list-style: none;
}

.tabMargin {
    margin-top: 10px;
}

.editIcon {
    width: 50px;
}

.control-label {
    padding-top: 9px;
}

.field-validation-valid {
    padding-top: 5px;
}

.tableUserName {
    font-size: 18pt;
    font-weight: bold;
    padding: 5px;
}

.spacer {
    padding: 20px;
}

.spacer10 {
    padding: 10px;
}

.spacer25 {
    padding: 25px;
}

.spacer35 {
    padding: 35px;
}

.selNone {
    color: lightgray;
}

.selOther {
    color: black;
}

.dashGreen {
    background-color: greenyellow;
}

.dashYellow {
    background-color: lightyellow;
}

.dashRed {
    background-color: lightcoral;
}

.isLocked {
    background-color: lightgrey;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url("/graphics/asc.gif");
}

table.tablesorter thead tr .headerSortDown {
    background-image: url("/graphics/desc.gif");
}

.gcTDLeft {
    overflow: hidden;
    word-wrap: break-word;
    text-align: left;
}

.gcTDRight {
    overflow: hidden;
    word-wrap: break-word;
    text-align: right;
}

.gcTDCenter {
    overflow: hidden;
    word-wrap: break-word;
    text-align: center;
}

.gcBorderBottom {
    border-bottom: 3px solid darkblue;
}

.tsDtlGrid {
    background-color: #f0f3f5 !important;
    margin-left: 25px;
    font-size: small;
}

.tableSmallFont {
    font-size: small;
}

.bottomMargin8 {
    margin-bottom: 5px;
    margin-top: 5px;
}

.bottomMargin20 {
    margin-bottom: 20px;
}

.bold {
    font-weight: bold;
}

.minBtnWidth {
    min-width: 150px;
}

.travelBtnWidth {
    min-width: 115px;
}

.travelAttachLine {
    border-top: dashed 2px cornflowerblue;
    padding-top: 10px;
    margin-top: 9px;
}

.largeBtnWidth {
    min-width: 250px;
}

.minDDWidth {
    min-width: 150px;
}

minBtnWidthSmall {
    min-width: 95px;
}

.gridCheckBox {
    width: 40px;
}

.gridRadio {
    width: 225px;
}

.widthSmall {
    width: 40px;
}

.TSPhaseCode {
}

.TSHours {
}

.TSEquip {
}

.dtlSelRow {
    background-color: lightyellow !important;
}


#bugNumber {
    color: white;
    padding-left: 3px;
    float: right;
}

.bugRed {
    color: indianred;
    padding-top: 10px;
}

.bugOrange {
    color: darkorange;
    padding-top: 10px;
}

.bugYellow {
    color: lightgoldenrodyellow;
    padding-top: 10px;
}

.bugGreen {
    color: #b2e6a8;
    padding-top: 10px;
}

.bugEmpty {
    color: black;
    padding-top: 10px;
}

.bugBoxAlert {
    min-height: 215px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 20px;
}

.bugBoxRed {
    color: #3d3d3d;
    background-color: #ee6767;
    border-color: #ebccd1;
}

.bugDismiss {
    color: white !important;
    background-color: white !important;
}

.bugBoxOrange {
    color: #3d3d3d;
    background-color: #f8b72b;
    border-color: #ebccd1;
}

.bugBoxYellow {
    color: #3d3d3d;
    background-color: #fbf8a3;
    border-color: #ebccd1;
}

.bugBoxGreen {
    color: #3d3d3d;
    background-color: #9ff781;
    border-color: #ebccd1;
}

.checkRed {
    color: #b92c28;
}

.checkGreen {
    color: green;
}

.mediumInput {
    max-width: 215px;
}

.longInput {
    max-width: 1000px;
}

.medLongInput {
    max-width: 475px;
}

.tsHeadStyle {
    font-weight: bold;
}

.commentTimestamp {
    font-weight: normal;
    font-size: smaller;
}

.commentLabel {
    vertical-align: top;
    font-weight: bold;
    color: black;
}

.commentMade {
    color: #0F0F0F;
    font-weight: normal;
}

.btnComment {
    margin-bottom: 5px;
    margin-top: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.boxOutline {
    outline: 1px solid lightgrey;
    padding: 3px;
}

.boxLightOutline {
    border: solid 1px #eeeeee;
    padding: 7px;
    margin-bottom: 10px;
}

.boxHighlight {
    border: solid 4px #FBCB4A;
    padding: 7px;
    margin-bottom: 10px;
}

.tableMinBottom {
    margin-bottom: 1px;
}


.btn-danger {
    color: #fff;
    background-color: #d9534f;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
}

.btn-required {
    color: #fff;
    background-color: #337ab7;
}

.btn-optional {
    color: white;
    background-color: lightgray;
}

.btn-AllJobs {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    margin-left: 8px;
}

.errorMsg {
    color: #d9534f;
    font-weight: bold;
}

.goodMsg {
    color: darkgreen;
    font-weight: bold;
}

.warnMsg {
    color: #e38d13;
    font-weight: bold;
}

.messageDetails {
    height: 289px;
    border: solid 2px black;
    overflow: auto;
    padding: 5px;
}

.tableFooter {
    border-top: solid black 2px;
    font-weight: bold;
}

.tableHoverNow {
    background-color: #D2F5FC !important;
}

.skillBox {
    border: 1px solid lightgrey;
    border-radius: 5px;
    border-top: ridge;
    border-left: ridge;
    height: 50px;
}

.listParmBox {
    border: solid 1px black;
    border-radius: 11px;
    padding: 15px;
    margin-bottom: 5px;
}

/* in case we need any formatting of checkboxes later.*/
.checkBox {
    box-shadow: inset 0px 0px;
}

.successMsg {
    color: #1e8449;
    font-weight: bold;
    padding-left: 22px;
    padding-top: 4px;
}

.extraBtnMargin {
    margin-left: 9px;
    margin-top: 2px;
}

.TSTimeLow {
    color: #cc5500; /* Burnt orange */
}

.TSTimeGood {
    color: black;
}

.TSTimeHigh {
    color: #8b0000; /* Dark Red */
}

/* Placeholder class in case we ever want to make a global change to the record scroll div.*/
.recScroll {
}

.divFloat {
    position: relative;
    /*top: 250px;
    left: 125px;
        */
}

.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

.smallSpinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.smallHeight {
    line-height: 1.0;
}

.EmpList {
    width: 95%;
    background-color: #F8F7F7;
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
    border-radius: 5px;
}

/* SB the same as EmpList but slightly pink to denote a placeholder */
.EmpPlaceholder {
    width: 95%;
    background-color: #F6CED8;
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
    border-radius: 5px;
}

.TradeList {
    width: 95%;
    background-color: #67B2E8;
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
    border-radius: 5px;
}

.CrewList {
    width: 95%;
    background-color: #CED0CD;
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
    border-radius: 5px;
}

.CrewHeader {
    background-color: #CED0CD !important;
}

.RotationList {
    width: 95%;
    background-color: #CED0CD;
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
    border-radius: 5px;
}

.SkillList {
    width: 95%;
    background-color: #CED0CD;
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
    border-radius: 5px;
}

.JobList {
    width: 240px;
    background-color: lightgray;
    border: 1px solid black;
    margin: 6px;
    padding: 10px;
    float: left
}

.reviewText {
    color: darkorange;
    font-weight: bold;
    border: 2px solid black;
}

.dragEnter {
    border: 2px dashed black;
    background-color: #FCF641 !important;
}

.dragTarget {
    border: 1px dashed lightgrey;
    background-color: #BE81F7 !important;
}

.marquee {
    width: 800px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        /* show the marquee just outside the paragraph */
        animation: marquee 10s linear infinite;
    }

        .marquee span:hover {
            animation-play-state: paused
        }

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

.JobBoardLargeOpen {
    width: 55%;
    height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
}


.JobBoardSmallOpen {
    width: 15%;
    height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
}

.JobBoardSmallClosed {
    width: 0%;
    height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
}

.stdLabel {
    width: 150px;
}

.JBAvail {
    background-color: #C9E4CA;
    border: 1px dotted #848484;
    margin-left: 6px;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 4px;
}

.JBBusy {
    background-color: #C78F9E;
    border: 1px dotted #848484;
    margin-left: 6px;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 4px;
}

.jobSyncActive {
    font-size: 12pt;
    font-weight: bold;
    color: #537349;
    border: 1px solid black;
    padding-left: 41px;
}


.JBHours {
    background-color: #CED0CD;
    border: 1px dotted #848484;
    margin-left: 6px;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 4px;
}

.JBProv {
    background-color: #CED0CD;
    border: 1px dotted #848484;
    margin-left: 6px;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 4px;
}

.SkillFill {
    background-color: #337AB7;
    color: #FFF;
    border: 1px dotted #848484;
    margin-left: 6px;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 4px;
    cursor: pointer;
}

.JBSkill {
    background-color: #67B2E8;
    border: 1px dotted #848484;
    margin-left: 6px;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 4px;
}

.divWrap {
    border: 1px solid #848484;
    padding-bottom: 2px;
    padding-top: 2px;
}

.JBCrewAlias {
    height: 25px;
    padding: 0 5px;
    border-radius: 5px;
}

.WidthAsCol {
    max-width: 100%;
}

.pointerHand {
    cursor: pointer;
}

.addrCOS {
    border: 1px solid grey;
    width: 780px;
    border-radius: 17px;
    padding-top: 15px;
}

.msgSpanSum {
    height: 30px;
    width: 90%;
    display: inline-block;
    padding-left: 7px;
    padding-top: 5px;
    margin: 5px;
    border-radius: 5px;
}

.msgSpan {
    height: 53px;
    width: 78px;
    display: inline-block;
    padding-left: 7px;
    padding-top: 5px;
    margin: 5px;
    border-radius: 5px;
}

.grid-input {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
}

.RotationNotSet {
    font-weight: bold;
    color: #d9534f;
}

.StdRadioButton {
    border: 1px solid darkgrey;
    border-radius: 5px;
    padding: 5px 33px 6px 7px;
    min-width: 320px;
}

.TextRight {
    text-align: right;
}

.control-half {
    max-width: 140px;
}

.control-third {
    max-width: 94px;
}

.gridRightBorder {
    border-right: solid 1px darkgray;
}

/* show light color for smaller windows and darker for wide menus */
.submenu {
    list-style: none;
    color: #9d9d9d;
}

@media (min-width: 768px) {
    .submenu {
        color: #333333;
    }
}

.matAreaBorder {
    border: solid 1px #9F9F9F;
    border-radius: 10px;
    margin: 5px;
    padding-left: 0px;
}

.padLeft0 {
    padding-left: 0px;
}

.gridStickHead {
    position: sticky;
    top: 77px;
    background-color: white;
}

.gridView {
    margin: auto;
    width: 100%;
}

.gridWrap {
    position: relative;
    overflow: auto;
    white-space: nowrap;
    width: 100%;
}

.gridWrapNoOF {
    position: relative;
    white-space: nowrap;
    width: 100%;
}

.gridStickyCol {
    position: -webkit-sticky;
    position: sticky;
    top: 77px;
    z-index: 100;
}

.gridStickyColEqp {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    z-index: 100;
}

.gridGhostWhite {
    background-color: ghostwhite;
    opacity: 100%;
    z-index: 800;
}


.gridStickyColPlan {
    position: -webkit-sticky;
    position: sticky;
    background-color: #EFFBEF; /* super light green */
}

.firstColStickSched {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    left: 0px;
    border: 1px solid black;
}

.secondColStickSched {
    width: 245px;
    min-width: 245px;
    max-width: 245px;
    left: 150px;
    border: 1px solid black;
}

.firstColStickSeg {
    position: sticky;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    left: 0px;
    border: 1px solid black;
}

.secondColStickSeg {
    position: sticky;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    left: 50px;
    border: 1px solid black;
    padding-right: 5px;
}

.thirdColStickSeg {
    position: sticky;
    width: 75px;
    min-width: 75px;
    max-width: 75px;
    left: 110px;
    border: 1px solid black;
    padding-right: 5px;
}

.forthColStickSeg {
    position: sticky;
    width: 206px;
    min-width: 206px;
    max-width: 206px;
    left: 179px;
    border: 1px solid black;
    padding-right: 8px;
}

.bgWhite {
    background-color: white;
}

.firstColStick {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    left: 0px;
    border: 1px solid black;
}

.secondColStick {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    left: 100px;
    border: 1px solid black;    
}

.thirdColStick {
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    left: 200px;
    border: 1px solid black;
}

.forthColStick {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    left: 235px;
    border: 1px solid black;
}

.fifthColStick {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    left: 285px;
    border: 1px solid black;
}

.SchedNone {
    border: 2px solid black;
    display: inline-table;
    font-size: 20px;
    padding: 20px;
    margin-bottom: 5px;
    height: 50px;
    width: 50px;
}

.SchedHour {
    border: 1px solid black;
    font-size: 11px;
    margin-bottom: 5px;
    height: 50px;
}

.firstColStickHour {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    left: 0px;
    border: 1px solid black;
}

.secondColStickHour {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    left: 80px;
    border: 1px solid black;
}

.firstColStickEquip {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    left: 0px;
    border: 1px solid black;
}

.secondColStickEquip {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    left: 90px;
    border: 1px solid black;
}

.attachDate {
    font-weight: normal;
    font-size: smaller;
}

.SchedTasksPannel {
    width: 30%;
    height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
}

.SchedDetailsPannel {
    width: 65%;
    height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
}

.SchedAll {
    width: 95%;
    margin: 3px;
    padding: 3px;
    border: 2px solid;
    border-radius: 5px;
}

.SchedAllDone {
    width: 95%;
    margin: 3px;
    padding: 3px;
    border: 2px solid;
    border-radius: 5px;
    background-color: lightblue;
}

.SchedCycle {
    border: solid 2px black;
    padding: 2px;
    margin: 2px;
}

.SchedGantt {
    border: 1px solid black;
    font-size: 11px;
    margin-bottom: 5px;
    border-collapse: separate;
}

.SchedAvail {
    background-color: #C2FBC9;
}

.SchedDone {
    background-color: #76EE9A;
}

.SchedOpen {
    background-color: #9BE9F9;
}

.SchedError {
    background-color: #F65F5F;
}

.SchedLabError {
    background-color: #F7844F;
}

.SchedMatWarn {
    background-color: #FBCBA2;
}

.noPadRight {
    padding-right: 0px;
    padding-left: 0px;
}

.SchedDHist {
    background-color: #C6D6E5;
    border: solid 1px #C6D6E5;
}

.SchedNHist {
    background-color: #E7E0C8;
    border: solid 1px #E7E0C8;
}

.SchedAHist {
    background-color: #EBECCF;
    border: solid 1px #EBECCF;
}

.SchedGHist {
    background-color: #E0E0E0; /* grey */
    border: solid 1px #E0E0E0;
}

.SchedD {
    background-color: #5CBFDC;
    border: solid 1px #5CBFDC;
}

.SchedN {
    background-color: #F3CE50;
    border: solid 1px #F3CE50;
}

.SchedA {
    background-color: #F9F819;
    border: solid 1px #F9F819;
}

.SchedG {
    background-color: #CEC3C3; /* grey */
    border: solid 1px #CEC3C3;
}

.SchedSO {
    background-color: #74F46E; /* green */
    border: solid 1px #74F46E;
}

.SchedSI {
    background-color: #CD74FA; /* purple */
    border: solid 1px #CD74FA;
}

.SchedSW {
    background-color: #FF8000; /* orange */
    border: solid 1px #FF8000;
}

.SchedT {
    background-color: #BCA9F5; /* light purple */
    border: solid 1px #BCA9F5;
}

.SchedSwitchDay {
    background-color: #FF7F7F;
}

.SchedDisabled {
    background-color: lightgray;
    border: solid 1px #CEC3C3;
}

.SchedERYellow {
    background-color: #F8F8AE;
    border: solid 1px #F8F8AE;
}

.SchedEROrange {
    background-color: #FAD99F;
    border: solid 1px #FAD99F;
}

.SchedERRed {
    background-color: #FBB2A6;
    border: solid 1px #FBB2A6;
}

.SchedERGreen {
    background-color: #C0EFBE;
    border: solid 1px #C0EFBE;
}

.SchedEmpty {
    background-color: white;
    border: solid 1px white;
}

.SchedInvalid {
    background-color: #F65F5F;
    border: solid 1px #F65F5F;
}

.SchedPOP {
    background-color: ghostwhite;
    border: solid 1px ghostwhite;
}

.SchedTH {
    white-space: pre-wrap;
    min-width: 40px;
    max-width: 40px;
    height: 30px;
    padding: 5px;
    background-color: white;
}

.SchedTHHour {
    white-space: pre-wrap;
    min-width: 25px;
    max-width: 28px;
    height: 20px;
    padding: 2px;
    writing-mode: vertical-rl;
    font-weight: normal;
}

.SchedTHDate {
    font-size: 24px;
    font-weight: bold;
}

/* two shifts per day.  */
.SchedTHDouble {
    white-space: pre-wrap;
    min-width: 80px;
    max-width: 80px;
    height: 30px;
}

.SchedTHTriple {
    white-space: pre-wrap;
    min-width: 120px;
    max-width: 120px;
    height: 30px;
}

.SchedTHQuad {
    white-space: pre-wrap;
    min-width: 1600px;
    max-width: 1600px;
    height: 30px;
}

.SchedTD {
    max-width: 40px;
    height: 25px;
    padding: 4px;
}

.SchedInput {
    font-size: 11px;
    max-width: 35px;
    text-align: center;
    padding: 0px;
}

.SchedInputPOP {
    font-size: 11px;
    max-width: 30px;
    text-align: left;
    padding: 0px;
}

.SchedInputWide {
    font-size: 11px;
    max-width: 80px;
    text-align: center;
    padding: 0px;
}

.SchedHeadTd {
    max-width: 40px;
    min-width: 40px;
    font-size: 11px;
    text-align: center;
    padding: 5px;
}

.SchedEditMode {
    border-color: #F66100;
    border-width: 2px;
    border-radius: 42%;
}

.PlaceholderColour {
    background-color: #F6CED8;
}

.imgPicLarge {
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    object-fit: contain;
}

.imgDelete {
    margin-right: 5px;
}

.SchedMaxLevel {
    margin-left: auto;
    width: 50%;
    display: block;
    min-width: 85px;
    max-width: 85px;
}

.hoverbox {
    position: absolute;
    top: 400px;
    left: 550px;
    z-index: 20;
    width: 500px;
    background-color: white;
    border: solid 1px black;
    text-align: left;
}

.hoverLock {
    position: absolute;
    left: 15px;
    color: darkred;
}

.hoverUnLock {
    position: absolute;
    left: 15px;
    color: darkgreen;
}

.schedHourHover {
    position: absolute;
    border: solid 1px black;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.schedHourSelect {
    border: 4px dashed black;
}

.schedDateHover {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background-color: white;
}


.infoText {
    padding-left: 30px;
    padding-bottom: 10px;
    font-weight: bold;
}

.maxWidth80 {
    max-width: 80%;
}

.maxWidth40 {
    max-width: 40%;
}

/* subheading for main timesheet form*/
.TSH3 {
    font-size: 18px;
    font-weight: bold;
}

.MaxLevel {
    width: 60px;
}

.MaxError {
    background-color: #F65F5F; /* red */
    font-weight: bold;
}


.CHGood {
    background-color: #A9F5A9; /* green*/
}

.CHWarn {
    background-color: #F3F781; /* yellow*/
}

.CHError {
    background-color: #F65F5F; /* red */
}

.CHTicket {
    background-color: #CC81F7; /* purple */
}

.CHTicketExp {
    background-color: #8B008B /* dark magenta*/
}

.CHTicketNV {
    background-color: #F5E6FF; /* light purple */
}


.complianceShow {
    cursor: pointer;
    color: darkorange;
    background-color: lightgoldenrodyellow;
}

.complianceOn {
    border-color: #CC81F7; /* purple */
    border-width: 2px;
    border-radius: 20px;
}

.hoverTitle {
    font-size: 14px;
    font-weight: bold;
}

.hoverCheck {
    position: relative;
    top: 0px;
    left: 10%;
}

.hoverChk {
}

.hoverIP {
    width: 42px;
    background-color: lightyellow;
}

.hoverIPRO {
    width: 42px;
    background-color: lightgray;
}

.hoverStart {
    position: relative;
    float: left;
    top: -3px;
}

.hoverEnd {
    position: relative;
    float: right;
    top: -3px;
}

.hoverGrip {
}

.hoverGripR {
    left: 95%;
    float: right;
    padding-left: 4px;
    padding-right: 4px;
}

.hoverGripL {
    float: left;
    left: 5%;
    padding-left: 4px;
    padding-right: 4px;
}

.hoverGripC {
    left: 50%;
    top: 24px;
}

.ElementTitle {
    font-size: 18px;
    font-weight: bold;
}

.simpleBorder {
    border: solid 1px black;
    padding: 5px;
    overflow: auto;
    border-radius: 8px;
}

.cellSelected {
    background-color: #F8ECBB;
}

.SchedTask {
    border: 1px solid black;
    padding-bottom: 2px;
    padding-left: 5px;
    margin-bottom: 5px;
    max-width: 375px;
}

.SchedList {
    border: 1px solid black;
    padding: 5px;
    margin-bottom: 5px;
    max-width: 375px;
    border-radius: 8px;
}

.errorBorder {
    border: solid 2px red;
}

.crossed {
    background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%);
}

.txtSfxLabel {
    padding: 9px 0px 0px 5px;
}

.marginLeft20 {
    margin-left: 20px;
}

.marginLeft10 {
    margin-left: 10px;
}

.marginLeft115 {
    margin-left: 115px;
}

.easyOrderPic {
    height: 200px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 9px;
}

.easyOrderInLine {
    display: inline;
    width: 50%;
    margin-left: 5px;
    margin-right: 5px;
}

.easyOrderTruckAll {
    color: purple;
}

.easyOrderTruckOrdered {
    color: darkgreen;
}

/* Leave this empty - just acting as a flag.*/
.easyOrderNoOrder {
}

.easyOrderDiv {
    padding: 20px;
    margin-bottom: 20px;
}

.easyOrderDivInner {
    border: 1px solid lightgray;
    padding: 3px;
}

.easyOrderEntered {
    border: solid 3px darkgreen;
    padding: 1px;
}


.easyOrderText {
    padding-left: 8px;
    font-size: 17px;
}

.easyOrderQtyLbl {
    padding-top: 5px;
    padding-left: 5px;
    font-size: 12px;
}

.purchReqExpidite {
    background-color: red;
    color: black;
}

.primePicLbl {
    font-weight: 500;
}

.primePicCheck {
    margin-right: 6px !important;
}

.globalErrorMessage {
    position: fixed;
    top: 30%;
    left: 40%;
    background-color: rgba(255,255,235, 1);
    opacity: 100%;
    border: 5px solid red;
    border-radius: 16px;
    padding: 12px;
    margin: 10px;
    width: 25%;
    max-width: 25%;
    min-width: 25%;
    z-index: 1060;
}

.globalErrorMessage3Btn {
    position: fixed;
    top: 30%;
    left: 35%;
    background-color: #F4F3F2;
    opacity: 100%;
    border: 5px solid red;
    border-radius: 16px;
    padding: 12px;
    margin: 10px;
    width: 30%;
    max-width: 30%;
    min-width: 30%;
    z-index: 1060;
}

.globalErrorMessage3BtnGood {
    position: fixed;
    top: 30%;
    left: 35%;
    background-color: #F4F3F2;
    opacity: 100%;
    border: 5px solid #585858;
    border-radius: 16px;
    padding: 12px;
    margin: 10px;
    width: 30%;
    max-width: 30%;
    min-width: 30%;
    z-index: 1060;
}

.globalErrorMessageOTFMat {
    position: fixed;
    top: 10%;
    left: 30%;
    background-color: #F4F3F2;
    opacity: 100%;
    border: 5px solid #585858;
    border-radius: 16px;
    padding: 12px;
    margin: 10px;
    width: 35%;
    max-width: 35%;
    min-width: 35%;
    z-index: 1060;
}

.globalErrorMessageMatNode {
    position: fixed;
    top: 10%;
    left: 20%;
    background-color: #F4F3F2;
    opacity: 100%;
    border: 5px solid #585858;
    border-radius: 16px;
    padding: 12px;
    margin: 10px;
    width: 55%;
    max-width: 55%;
    min-width: 55%;
    max-height: 85vh;
    overflow: auto;
    z-index: 1060;
}

.globalErrorMessageGridMode {
    position: fixed;
    top: 10%;
    left: 10%;
    background-color: #F8F9F8;
    opacity: 100%;
    border: 5px solid #585858;
    border-radius: 16px;
    padding: 12px;
    margin: 10px;
    width: 80%;
    max-width: 80%;
    min-width: 55%;
    z-index: 1060;
}

.form-control-hidden {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
}

.globalErrorInnerDiv {
    padding: 15px;
}

.globalErrorOuter {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: lightgrey;
    border: 1px solid black;
    opacity: 52%;
    z-index: 1050;
}

.globalCancelBtn {
    margin-left: 30%;
}

.globalCancel3Btn {
    margin-left: 5%;
}

.bigCheckBox {
    width: 23px;
    height: 23px;
}

.lateCommitment {
    color: darkred;
    font-weight: bold;
}

.toolbarBar {
    background-color: lightgray;
    height: 27px;
}

.toolbarHeader {
    margin-top: 4px;
}

    .toolbarHeader a {
        color: black;
        text-decoration: none;
    }

.toolbarBtn {
    background-color: white;
    margin: 10px;
    padding: 2px 7px 2px 7px;
    border-radius: 3px;
    border: solid 1px #848484;
}

.tabDisabled {
    color: lightgray;
}

.gridTextArea {
    width: 100%;
    border-radius: 5px;
}

.gridTALocked {
    background-color: #eeeeee
}

.veryLightGrey {
    background-color: #f3f3f3;
}

.crewSchedRegen {
    border: solid 1px black;
    height: 105px;
    border-radius: 15px
}

.genNotes {
    font-size: 12px;
    padding-top: 12px;
}

.easyKit {
    float: right;
    font-size: 17px;
    color: red;
    border: solid 1px red;
    padding-left: 5px;
    padding-right: 5px;
}

.travelCol {
    height: 63vh;
    border: solid 1px black;
    overflow-y: auto;
    overflow-x: hidden;
}

.travelWidthSm {
    width: 15%;
    margin-right: 3px;
}

.travelWidthLg {
    width: 85%;
}

.travelMarginLeft {
    margin-left: 15px;
}

.travelRequest {
    border: solid black 1px;
    background-color: antiquewhite;
    margin-top: 5px;
    border-radius: 6px;
}

.travelEmail {
    border: solid black 1px;
    background-color: lightgoldenrodyellow;
    margin-top: 5px;
    border-radius: 6px;
}

.travelTable {
    border-collapse: unset;
    border-spacing: 15px 0px;
    background-color: transparent;
    border-width: 1px;
    font-size: 10px;
}

.travelTR {
    font-size: 10px;
}

.travelBtnPadding {
    padding-top: 15px;
    border: 1px solid black;
    border-radius: 5px;
    margin-left: 16px;
}

.travelMoveTxt {
    font-size: 12px;
    padding-bottom: 8px;
}

.displayFlex {
    display: flex;
}

.marginLeftSm {
    margin-left: 5px;
}

.travelNotes {
    font-size: 12px;
    border: 1px solid black;
    border-radius: 15px;
    padding: 9px;
    margin-bottom: 5px;
}

.travelRed {
    background-color: #F65F5F;
}

.travelYellow {
    background-color: #F3F781;
}

.travelGreen {
    background-color: #A9F5A9;
}

.travelOrange {
    background-color: #EB9316;
}

.attachOrigFileNm {
    padding-left: 10px;
}

.travelCSRed {
    background-color: #FF5B20;
}

.travelCSOrange {
    background-color: #FFA93C;
}

.travelCSYellow {
    background-color: #FBFD5D;
}

.travelCSGreen {
    background-color: #79EF6B;
}

.travelCSGrey {
    background-color: #C6C6C5;
}

.travelCSQuestion {
    background-color: lightsteelblue;
}

.emailArchive {
    background-color: #BCBBBA;
}

.quest-highlight {
    color: red;
}

.travelReqSelect {
    border: 2px #564275 solid;
    background-color: lightcyan;
}

.SchedEmpTravelBorder {
    border: 1px solid black;
    padding: 13px;
    border-radius: 20px;
    margin-top: 10px;
    background-color: #D7D5D0
}

.SchedEmpSummaryBorder {
    border: 1px solid black;
    padding: 13px;
    border-radius: 10px;
    margin-top: 10px;
    background-color: #F5F2EB;
}

.SchedEmpTravelBorder {
    border: 1px solid black;
    padding: 13px;
    border-radius: 20px;
    margin-top: 10px;
    background-color: #D7D5D0;
}

.SchedEmpEmailBorder {
    border: 1px solid black;
    padding: 13px;
    border-radius: 20px;
    margin-top: 10px;
    background-color: #C5C3BD;
}

.SchedEmpTRConf {
    background-color: #6CDF73;
    cursor: pointer;
}

.SchedEmpTRPend {
    background-color: #E6E0F8;
    cursor: pointer;
}

.SchedEmpConfirmBorder {
    padding: 13px;
    border-radius: 20px;
    margin-top: 10px;
    background-color: white;
}


.smallCheckbox {
    width: 20px !important;
}

.smallFont {
    font-size: 85%;
    font-weight: normal;
    padding-top: 13px;
}

.isRelative {
    position: relative;
}

.travelLblPad {
    padding-right: 15px;
}

.travelDivPad {
    padding-bottom: 23px;
}

.travelSCErrors {
    border: 1px solid red;
    padding-top: 5px;
    border-radius: 10px;
}



.travelApproveMsg {
    float: right;
    font-size: 12px;
    width: 440px;
}

.travelGoodConfirm {
    text-align: center;
    font-size: 20px;
    padding-top: 75px;
    color: #06610B;
}

.travelBadConfirm {
    text-align: center;
    font-size: 20px;
    color: #d9534f;
    padding-top: 75px;
}

.travelAttach {
    float: right;
    padding-right: 5px;
}

.rcvColour1 {
    background-color: #FEFDEB !important;
    margin-bottom: 0px;
}

.rcvColour2 {
    background-color: #FBF0DF !important;
    margin-bottom: 0px;
}

.rcvColour3 {
    background-color: #FEF6FF !important;
    margin-bottom: 0px;
}

.rcvColour4 {
    background-color: #EBFEEC !important;
    margin-bottom: 0px;
}

.rcvColour5 {
    background-color: #F7F1FF !important;
    margin-bottom: 0px;
}

.rcvColour6 {
    background-color: #F1FFFE !important;
    margin-bottom: 0px;
}

.rcvColour7 {
    background-color: #F1F1FF !important;
    margin-bottom: 0px;
}

.rcvBorderTop {
    border-top: solid 3px black;
}

.rcvStickyTop {
    position: sticky;
    top: 80px;
    z-index: 950;
    background-color: white;
    padding-bottom: 50px;
}

.rcvOpaque {
    background-color: white;
    opacity: 100%;
}

.rcvTable {
    width: 60%;
    max-width: 100%;
    border: solid 1px black;
}

.gridStickHeadRcv {
    position: sticky;
    top: 287px;
    background-color: white;
}

.longLabel {
    padding: 9px 0px 0px 12px;
}

.WIPMsg {
    background-color: yellow;
    font-weight: bold;
    border: solid 2px black;
    padding: 5px;
}

.globalQInput {
    float: right;
    max-width: 250px;
}

.globalQLongInput {
    float: right;
    max-width: 290px;
}

.globalQPad {
    padding-bottom: 15px;
}

.globalQPadThin {
    padding-bottom: 5px;
}

.zeroHeight {
    height: 0px;
    z-index: 9999;
}

.maxWidthOR {
    max-width: 100%;
}

/* tweaked this down as 3 buttons were displaying badly on popup messgaes */
.width30pct {
    width: 29%;
}

.radioGroup {
    border: solid 2px lightgrey;
    padding: 4px 20px 5px 1px;
    border-radius: 7px;
    min-width: 322px;
}

/* data-preferred="True" --> Preferred vendor target any option that has data-preferred = true*/
option[data-preferred="True"] {
    font-weight: bold;
    color: darkgreen;
    background-color: #FFF592;
}

.form-group-tight {
    margin-bottom: 3px;
}

/* overrides bootstrap standard of 15px */
.form-group {
    margin-bottom: 7px;
}



.form-cntrl-short {
    height: 25px;
}

.manufLbl {
    margin-left: 20px;
    font-weight: bold;
    display: inline-table;
    padding-top: 5px;
}

.TSExportNeutral {
    color: black;
}

.TSExportError {
    color: #d9534f;
}

.TSExportGood {
    color: darkgreen;
}

.signUpLogin {
    border: 1px solid black;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    margin: 2px;
}

.empNameType {
    margin-top: 8px;
    margin-left: 32px;
    font-weight: bold;
    position: absolute;
}

.flowRoot {
    display: flow-root;
}

.weekBtn {
    margin-left: 10px;
}

.crewShedHide {
    background-color: white !important;
    color: white !important;
    border: solid 1px white;
    pointer-events: none;
}

.travelDayWidth {
    width: 100px !important;
    text-align: right;
}

.travelDayMsg {
    position: absolute;
    padding-left: 15px;
    padding-top: 9px;
    font-weight: bold;
}

.schedPL4 {
    padding-left: 4px;
}

.PUFLine {
    border-right: 1px solid black;
}

.todayLine {
    border-right: 2px dashed blue;
}

.mechanicsLine {
    border-bottom: 2px solid black;
}

.saturdayLine {
    border-right: 1px solid black;
}

.borderColorGood {
    border-color: #106601;
}

.borderColorNeutral {
    border-color: #585858;
}

.dispatchJob {
    height: 80px;
    border: solid 2px black;
}

.dispatchJob2 {
    height: 40px;
    border: solid 2px black;
}

.dispatchJob3 {
    height: 27px;
    border: solid 2px black;
}

.dispatchJob4 {
    height: 20px;
    border: solid 2px black;
}

.trTravelBox {
    border: solid 1px black;
    border-radius: 3px;
    padding: 5px;
    margin-left: 5px;
    height: 40px;
}

/* height and width here need to match with height and width in sec-user.cs where the image is resized. */
.secUserSignature {
    border: solid 1px black;
    border-radius: 20px;
    height: 125px;
    width: 260px;
}

.pictureHeadArea {
    display: flex;
}

.pictureHeading {
    width: 170px;
    font-size: 16pt;
    font-weight: bold;
    padding-bottom: 25px;
    padding-top: 5px;
}

.pictureDropDown {
    float: right;
    width: 420px;
    max-width: 420px;
}

input.keywordsAll {
    margin-left: 10px;
    margin-top: 10px;
}

.EmpKeywords {
    font-size: 11px;
    margin-left: 13px;
    margin-bottom: 13px;
}

.scrolling-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
}

.scrolling-content {
    padding: 2px 10px 5px 5px;
}

input.popCheck {
    margin-right: 5px;
    margin-top: 0px;
}

.btnMargin {
    margin-top: 3px;
    margin-right: 5px;
}

input.inputBtn {
    display: inline;
}

input.inputBtnSpace {
    margin-bottom: 10px;
    padding-top: 1px;
}

.labelExtra {
    padding-left: 8px;
    padding-top: 10px;
    font-size: smaller;
    font-weight: 400;
    color: #B57A54
}
.labelExtraCheck {
    padding-left: 48px;
    padding-top: 10px;
    font-size: smaller;
    font-weight: 400;
    color: #B57A54
}

/* Staffing board Hiring Status Grid*/
#gridHire .form-group {
    margin-bottom: 2px;
    height: 32px;
}

#gridHire .form-group {
    margin-bottom: 4px;
    width: 50%;
    float: left;
    padding: 0 5px; /* Optional: adds some gutter between columns */
}

#gridHire .row:after {
    content: "";
    display: table;
    clear: both; /* Clear the float */
}

#gridHire .control-label {
    padding-top: 5px;
    font-weight: 300;
    font-size: 12px;
}

#gridHire input, select {
    max-width: 260px;
}

#gridHire .checkBox {
    height: 30px;
}

.CSHeaderArea {
    position: relative;
}
}

.nodeItem {
    font-size: 25px;
    border: 1px solid black;
    padding: 2px 3px;
    margin-right: 5px;
}

.noListType {
    list-style-type: none;
}

.treeArea {
    color: cadetblue;
}

/* Hide nested nodes by default */
#tree ul ul {
    display: none;
}

/* Style the toggle buttons */
#tree .toggle {
    cursor: pointer;
    font-weight: bold;
    margin-right: 5px;
}

/* Style the nested nodes */
#tree ul li ul li {
    margin-left: 20px;
}

#tree .isSelNode {
    font-weight: bold;
    color: purple;
}

#tree .isCtrlNode {
    font-weight: bold;
    color: darkblue;
}

#tree .isMaterial {
    color: darkred;
}

.WOStart {
    background-color: #ee6767;
}

.WOEnd {
    background-color: #b2e6a8;
}

.PMDue {
    background-color: lightgoldenrodyellow;
}

.OpSubHeadLabel {
    max-width: 75%;
    vertical-align: top;
}

.NoMaxLength {
    max-width: 2000px;
}

.OPWOIssued {
    margin-top: 5px;
    font-size: 18px;
    border: solid 1px black;
    padding: 2px 20px;
    border-radius: 4px;
}

.EquipOTS {
    background-color: #FA5858;
}

/* Gradient colours (Red -> Yellow) from 10 -> 100% */
.GradRY100 {
    background-color: #ff5065;
}
.GradRY90 {
    background-color: #ff6961;
}
.GradRY80 {
    background-color: #ff7f60;
}
.GradRY70 {
    background-color: #ff9463;
}
.GradRY60 {
    background-color: #ffa86b;
}
.GradRY50 {
    background-color: #ffba76;
}
.GradRY40 {
    background-color: #ffcb85;
}
.GradRY30 {
    background-color: #fedc97;
}
.GradRY20 {
    background-color: #feebac;
}
.GradRY10 {
    background-color: #fffac2;
}

.scrollTable {
    overflow-y: auto;
    max-height: 70vh;
}

.EquipNewMode {
    border-color: #9FF781;
    border-width: 2px;
    border-radius: 42%;
}

.EquipSchRedBox {
    border-color: red;
    border-width: 4px;
}

.image-contain {
    width: 100%;
    height: 100%;
}

.image-contain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position:center;
}

.width485 {
    max-width: 485px;
}

.SchedComment {
    position: relative; /* Ensure the triangle is positioned relative to the cell */
}

.SchedComment::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0; /* Creates a triangle */
    border-color: transparent red transparent transparent; /* Red triangle */
}